<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->


<!--    <style>-->
<!--        #app {-->
<!--            font-family: 'Avenir', Helvetica, Arial, sans-serif;-->
<!--            -webkit-font-smoothing: antialiased;-->
<!--            -moz-osx-font-smoothing: grayscale;-->
<!--            text-align: center;-->
<!--            color: #2c3e50;-->
<!--            margin-top: 60px;-->
<!--        }-->

<!--        .v-enter,-->
<!--        .v-leave-to {-->
<!--            /* 透明度 */-->
<!--            opacity: 0;-->
<!--            transform: translateY(10px);-->
<!--        }-->
<!--        /*-->
<!--            v-enter-active [时间段]入场动画时间段-->
<!--            v-leave-active  [时间段]离场动画时间段-->
<!--        */-->

<!--        .v-enter-active,-->
<!--        .v-leave-acive {-->
<!--            transition: all 1.5s ease;-->
<!--        }-->
<!--    </style>-->

<!--    &lt;!&ndash; Head &ndash;&gt;-->
<!--    <style>-->
<!--        .title {-->
<!--            margin: 15% 30px 1% 30px;-->
<!--            padding: 0 50px 0 50px;-->
<!--        }-->
<!--        .big-title {-->
<!--            font-size: 80px;-->
<!--            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",-->
<!--            "Microsoft YaHei", "微软雅黑", Arial, sans-serif;-->
<!--        }-->
<!--    </style>-->

<!--</head>-->
<!--<body>-->
<!--<div id="app">-->

<!--    &lt;!&ndash; 头开始 &ndash;&gt;-->
<!--    <div class="Head">-->
<!--        <div class="title">-->
<!--            <div class="big-title">Shiro-Master</div>-->
<!--        </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 头结束 &ndash;&gt;-->

<!--    <div>-->
<!--        <ul>-->
<!--            <li><a href="http://localhost:8080/save">save</a></li>-->
<!--            <li><a href="http://localhost:8080/delete">delete</a></li>-->
<!--            <li><a href="http://localhost:8080/update">update</a></li>-->
<!--            <li><a href="http://localhost:8080/select"> select</a></li>-->

<!--            <li><a href="http://localhost:8080/p">p</a></li>-->
<!--            <li><a href="http://localhost:8080/vip">vip</a></li>-->
<!--            <li><a href="http://localhost:8080/svip">svip</a></li>-->

<!--            <li><a href="http://localhost:8080/logout">回到原来的世界</a></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script th:src="@{/static/vue/vue.js}"></script>
    <script th:src="@{/static/vue/axios.js}"></script>
    <script th:src="@{/static/vue/index.js}"></script>

    <link rel="stylesheet" th:href="@{/static/vue/index.css}">

    <style>
        #app {
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }

        .v-enter,
        .v-leave-to {
            /* 透明度 */
            opacity: 0;
            transform: translateY(10px);
        }
        /*
        v-enter-active [时间段]入场动画时间段
        v-leave-active  [时间段]离场动画时间段
        */

        .v-enter-active,
        .v-leave-acive {
            transition: all 1.5s ease;
        }
    </style>

    <!-- Head -->
    <style>
        .title {
            margin: 15% 30px 1% 30px;
            padding: 0 50px 0 50px;
        }
        .big-title {
            font-size: 80px;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
        .small-title {
            font-size: 16px;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            margin-bottom: 20px;
            padding-left: 100px;
        }
    </style>

    <!-- LoginForm -->
    <style>
        .input {
            width: 300px;
            margin: 0;
            padding: 0;
        }
        .row {
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div id="app">

    <!-- 头开始 -->
    <div class="Head">
        <div class="title">
            <div class="big-title">Shiro-Master</div>
        </div>
    </div>
    <!-- 头结束 -->

    <!-- 中间件开始 -->
    <div class="small-title">一款基于SpringBoot + Shiro的权限管理系统</div>
    <!-- 中间件结束 -->

    <div class="World">
        <el-row>
            <el-button type="primary" @click="save">Save</el-button>
            <el-button type="success" @click="update">Update</el-button>
            <el-button type="info" @click="select">Select</el-button>
            <el-button type="danger" @click="del">Delete</el-button>
        </el-row>
        <br />
        <el-row>
            <el-button type="primary" @click="p">进入P的世界</el-button>
            <el-button type="success" @click="vip">进入VIP的世界</el-button>
            <el-button type="info" @click="svip">进入SVIP的世界</el-button>
            <el-button type="danger" @click="logout">离开世界</el-button>
        </el-row>
    </div>

    <!-- 只做跳转 -->
    <form action="http://localhost:8443/logout" method="POST" id="form" v-show="false"></form>
</div>
</body>
</html>

<script>
    new Vue({
        el: "#app",
        data: {
            url: 'http://localhost:8443'
        },
        methods: {
            showMsg(result) {
                if ( result.data.code === 200) {
                    this.$message({
                        showClose: true,
                        message: result.data.message,
                        type: "success",
                        duration: "600"
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: result.data.message,
                        type: "error",
                        duration: "3000"
                    });
                }
            },

            save() {
                axios({
                    method: "POST",
                    url: this.url+"/save",
                }).then(result => {
                    this.showMsg(result);
                });
            },
            update() {
                axios({
                    method: "PUT",
                    url: this.url+"/update",
                }).then(result => {
                    this.showMsg(result);
                });
            },

            select() {
                axios({
                    method: "GET",
                    url: this.url+"/select",
                }).then(result => {
                    this.showMsg(result);
                });
            },
            del() {
                axios({
                    method: "DELETE",
                    url: this.url+"/delete",
                }).then(result => {
                    this.showMsg(result);
                });
            },
            p() {
                axios({
                    method: "GET",
                    url: this.url+"/p",
                }).then(result => {
                    this.showMsg(result);
                });
            },
            vip() {
                axios({
                    method: "GET",
                    url: this.url+"/vip",
                }).then(result => {
                    this.showMsg(result);
                });
            },
            svip() {
                axios({
                    method: "GET",
                    url: this.url+"/svip",
                }).then(result => {
                    this.showMsg(result);
                });
            },

            logout() {
                document.getElementById("form").submit();
            }
        }
    })
</script>